<script setup lang="ts">
	import { reactive, ref, onMounted, computed } from "vue"
	import { useRouter } from 'vue-router'
	import Breadcrumb from '../components/Breadcrumb.vue'
	import User from '../components/User.vue'
	import Footer from '@/components/Footer.vue'

	/**
	 * 路由对象
	 */
	const router = useRouter()

	const data = reactive({
		menus: [
			{'menuName':'仪表盘', 'path':'/bi_frontend/dashBoard', 'disabled':false,'menuchilds':[], 'icon':'TrendCharts'},

			{'menuName':'资产标签与客户画像', 'path':'/bi_frontend/dataAnalysis', 'disabled':false,'menuchilds':[
                    {'menuName':'资产标签化', 'path':'/bi_frontend/assetTagging', 'disabled':false, 'icon':"PriceTag"},
                    {'menuName':'客户画像化', 'path':'/bi_frontend/portrait/customer', 'disabled':false, 'icon':"User"},
                    {'menuName':'资产智能推荐', 'path':'/bi_frontend/portrait/customer2', 'disabled':false, 'icon':"Filter"},
                ], 'icon':'PriceTag'},

			{'menuName':'线上尽调与估值', 'path':'/bi_frontend/due', 'disabled':false,'menuchilds':[
				{'menuName':'单户债权一键尽调', 'path':'/bi_frontend/addProject/upload', 'disabled':false, 'icon':"FullScreen"},
				{'menuName':'资产包一键尽调', 'path':'/bi_frontend/addProject/upload1', 'disabled':false, 'icon':"Grid"},
				{'menuName':'远程线上尽调', 'path':'/bi_frontend/remoteDue', 'disabled':false, 'icon':"View"},
				{'menuName':'资产估值', 'path':'/bi_frontend/houseEstimation', 'disabled':false, 'icon':"House"},                    
			], 'icon':'OfficeBuilding'},

			{'menuName':'交易数字化', 'path':'transactionDigitization', 'disabled':false,'menuchilds':[
				{'menuName':'数字化招商', 'path':'', 'disabled':false, 'icon':"DataBoard"},
				{'menuName':'数字化挂牌', 'path':'', 'disabled':false, 'icon':"DataAnalysis"},
				{'menuName':'网络竞拍', 'path':'', 'disabled':false, 'icon':"Trophy"},
				{'menuName':'成交确认书区块链存证', 'path':'/bi_frontend/dealConfirmation', 'disabled':false, 'icon':"DocumentCopy"},
			], 'icon':'Grid'},

			{'menuName':'重整重组', 'path':'/bi_frontend/reorganization', 'disabled':false,'menuchilds':[
                    {'menuName':'资产信息登记管理', 'path':'/bi_frontend/regroup', 'disabled':false, 'icon':"CircleCheck"},
                    {'menuName':'查档阅卷', 'path':'/bi_frontend/regroup2', 'disabled':false, 'icon':"Memo"},
                    {'menuName':'账户管理 ( 银行/证券 )', 'path':'/bi_frontend/regroup3', 'disabled':false, 'icon':"Money"},
                    {'menuName':'线上会议 ( 债权人/管理人/法官 )', 'path':'/bi_frontend/regroup4', 'disabled':false, 'icon':"Avatar"},
                    {'menuName':'流程管理', 'path':'/bi_frontend/regroup5', 'disabled':false, 'icon':"Operation"},
                    {'menuName':'股权监控', 'path':'/bi_frontend/regroup6', 'disabled':false, 'icon':"VideoCamera"},
                    {'menuName':'债转股', 'path':'/bi_frontend/regroup7', 'disabled':false, 'icon':"Switch"},
                ], 'icon':'Loading'},
			{'menuName':'个贷调解分发', 'path':'/bi_frontend/individual', 'disabled':false,'menuchilds':[
				{'menuName':'案件分发', 'path':'/bi_frontend/personalLoand/dstribute', 'disabled':false, 'icon':"Promotion"},
				{'menuName':'电子合同', 'path':'', 'disabled':false, 'icon':"Stamp"},
				{'menuName':'进度管理', 'path':'', 'disabled':false, 'icon':"Odometer"},
				{'menuName':'回款对账', 'path':'', 'disabled':false, 'icon':"DocumentCopy"},
			], 'icon':'Promotion'},
		],
	})

	/**
	 * 菜单激活路径，通过当前路由计算
	 */
	const activePath = computed(() =>{
		let activePathVar = ""
		router.currentRoute.value.matched.forEach(element => {
			// if(element.path === "/bi_frontend/project/add") {
			// 	activePathVar = "/bi_frontend/project/add"
			// }
		})
		return activePathVar ? activePathVar: router.currentRoute.value.path
	})
</script>

<template>
	<div class="common-layout">
		<el-container>
			<el-header class="p-0" style="height: 60px;">
				<el-menu router :default-active="activePath" class="el-menu-demo" mode="horizontal"
					background-color="#606266" text-color="#fff" active-text-color="#ffd04b" style="height: 60px;">
					<el-menu-item index="/bi_frontend">
						<el-image src="/bi_frontend/imgs/icon_logo_white.png" style="width: 90%; margin-bottom:10px"/>
					</el-menu-item>
					<template v-for="item in data.menus" >
						<el-sub-menu v-if="item.menuchilds.length > 0"  :index="item.path" :disabled="item.disabled">
							<template #title>
								<el-icon>
									<component :is="item.icon"></component>
								</el-icon>
								{{item.menuName}}
							</template>
							<el-menu-item v-for="itemSub in item.menuchilds" :index="itemSub.path">{{ itemSub.menuName }}</el-menu-item>
						</el-sub-menu>
						<el-menu-item v-else  :index="item.path" :disabled="item.disabled">
							<!-- <el-icon><location /></el-icon> -->
							<el-icon>
								<component :is="item.icon"></component>
							</el-icon>
							<template #title>{{item.menuName}}</template>
						</el-menu-item>
					</template>
					<User/>
				</el-menu>
			</el-header>
			<el-main class="p-0">
				<div style="padding: 30px;">
					<Breadcrumb />
				</div>
				<!-- 路由占位符 -->
				<router-view />
			</el-main>
			<!-- <el-footer>Footer</el-footer> -->
			<Footer/>
		</el-container>
	</div>
</template>
